body{
    min-height: 100vh;
    overflow: hidden;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 1.2rem;
    
    &.dark-mode{
        --main: #6059DF;

        --text: #fff;
        --text-light: #dadada;
        --border: #313131;
    
        --background: #1C1C25;
        --background-light: #282A37;
        --background-dark: #1e1f29;
    }
    &:not(.dark-mode){
        --main: #6059DF;

        --text: #000;
        --text-light: #454545;
        --border: #CECECE;
    
        --background: #EFF2FC;
        --background-light: #FFF;
        --background-dark: #EAEAEA;
    }
}
.mat-menu-panel{
    background: var(--background);
    border: 0.1rem solid var(--border);
}
.mat-menu-content button{
    color: var(--text);
    font-weight: 500;
}
.btn-main{
    outline: none;
    display: block;
    width: fit-content;
    border: 0;
    text-transform: uppercase;
    border-radius: 2em;
    font-size: 0.9em;
    padding: 1em 2em;
    font-weight: 500;
    color: #fff;
    background-color: var(--main);
    cursor: pointer;
    transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;
    &:hover{
        background-color: var(--main);
        transform: scale(0.95);
    }
}
.component{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    padding: 0.3em;
    z-index: 3;
    &.bordered{
        background-color: var(--background-light);
    }
    &.read-only{
        pointer-events: none;
    }
    & .img-container{
        position: absolute;
        padding: 7px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover{
            cursor: move;
        }
    }
    & img{
        width: 100%;
    }
    & .img{
        width: 100%;
        height: 100%;
    }
    &.anim{
        & .img-container{
            animation: receivedatabg 0.5s linear; 
        }
        & img, & span.img{
            animation: receivedata 0.3s linear;
        }
    }
    &.is-current-selection{
        & .img-container{
            outline: 2px solid var(--main) !important;
            outline-style: dashed !important;
            outline-offset: 2px !important;
        }
    }
}
.bg{
    &-cloudstorage{
        mask: url("./assets/cloudstorage.svg") no-repeat center;
        -webkit-mask: url("./assets/cloudstorage.svg") no-repeat center;
    }
    &-proxy{
        mask: url("./assets/proxy.svg") no-repeat center;
        -webkit-mask: url("./assets/proxy.svg") no-repeat center;
    }
    &-webserver{
        mask: url("./assets/webserver.svg") no-repeat center;
        -webkit-mask: url("./assets/webserver.svg") no-repeat center;
    }
}
.status-code-side{
    position: absolute;
    z-index: 10;
    right: 120%;
    bottom: 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.55rem;
    text-align: center;
    animation: status-side 1.5s linear;
    & > span{
        font-size: 1.1em;
        &.info{
            color:rgb(38, 175, 146);
        }
        &.success{
            color:rgb(38, 175, 79);
        }
        &.warning{
            color:rgb(175, 161, 38);
        }
        &.error{
            color:rgb(175, 38, 38);
        }
    }
}
.topic-expansion-header{
    font-size: 1rem;
    padding-right: 1em !important;
    color: var(--text);
    & .mat-content{
        width: 100%;
    }
}
a{
    color: inherit;
    text-decoration: none;
}
li{
    list-style: none;
}
.mt{
    > div{
        margin-top: 1em;
    }
}
.button-icon{
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s ease-out;
    cursor: pointer;
    &:hover{
        transform: scale(1.2);
    }
}
.dropped-data{
    transition: transform 0.6s ease-out, opacity 0.8s ease-in;
    fill: #31B78D;
}
.nav-list{
    display:flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-evenly;
    gap:1em;
    & mat-form-field{
        font-weight: normal;
        font-family: Roboto, "Helvetica Neue", sans-serif;
        font-size: 0.8;
        width: 2.8em;
        margin-left: 0.9em;
        & .mat-form-field-wrapper, .mat-form-field-flex, .mat-form-field-infix, mat-select, mat-select div:not(.mat-select-trigger), .mat-form-field-underline, .mat-form-field-ripple{
            margin: 0;
            padding: 0;
            border: none;
            line-height: 1;
            outline: none;
            height: 100%;
            border-radius: 0;
            background-color: transparent;
            color: var(--text);
            font-size: inherit;
            &::after{
                display: none;
            }
            &::before{
                display: none;
            }
        }
        & mat-select .mat-select-trigger{
            width: 100%;
        }
    }
}
.options-menu-window{
    position: absolute;
    top: 28%;
    bottom: 24%;
    right: 0;
    min-height: 350px;
    width: 18.5rem;
    padding-bottom: 2em;
    background-color: var(--background-light);
    border: 0.15rem solid var(--border);
    border-right: 0;
    color: var(--text);
    overflow-x: hidden;
    overflow-y: scroll;
    & .input{
        outline: none;
        background-color: var(--main);
        border: 0.15em solid rgba(0,0,0,0.2);
        color: var(--text);
        padding: 0.2em 0 0.2em 0.5em;
        font-size: 1rem;
        max-width: 70%;
        transition: background-color 0.1s linear;
        &::placeholder{
            color: var(--text);
            transition: transform 0.1s ease-out;
        }
        &:hover{
            background-color: var(--main);
            &::placeholder{
                transform: translateX(0.1em);
            }
        }
    }
    & input:disabled{
        pointer-events: none;
        filter: brightness(0.65) !important;
    }
    & .main{
        display: flex;
        flex-flow: column nowrap;
        gap: 0.3em;
    }
    & .async-check{
        color: rgb(133, 133, 133);
        padding-inline: 0.25em;
        cursor: pointer;
        &.checked{
            opacity: 1;
            color: var(--main);
            font-weight: bold;
            transform: scale(1.1);
        }
        &.disabled{
            pointer-events: none;
            filter: grayscale(1);
        }
    }
    & .section{
        & .header{
            width: 100%;
            font-size: 1.1rem;
            font-weight: 400;
            padding: 0.2em 0.3em;
            background-color: var(--background);
            filter: brightness(0.95);
            display: flex;
            justify-content: space-between;
            &:hover{
                cursor: default;
            }
        }
        &.active .content{
            display: flex;
        }
        & .content{
            display: none;
            flex-flow: row wrap;
            margin: 0.4em 10% 0.4em 5%;
            gap: 10%;
            & > div{
                margin-top: 0.4em;
                flex-grow: 1;
                flex-basis: 100%;
                &.small{
                    flex-basis: 35%;
                    flex-grow: 0;
                    margin-left: auto;
                    margin-right: auto;
                    & input, & textarea{
                        font-family: inherit;
                        font-size: 0.9em;
                        width: 70%;
                        margin-left: 0.4em;
                    }
                }
            }
            & .property-name{
                font-size: 1.1rem;
                text-align: left;
                display: inline-block;
                color: var(--text-light);
            }
            & input, & textarea{
                outline: none;
                color: var(--text);
                padding: 0.2em;
                cursor: text;
                background-color: var(--background-dark);
                border: 0.1rem solid var(--border);
                transition: filter 0.1s linear;
                &:hover{
                    filter: brightness(0.9);
                    &::placeholder{
                        transform: translateX(10px);
                    }
                }
                &::placeholder{
                    color: var(--text);
                    transition: transform 0.1s ease-out;
                }
            }
            & textarea{
                display: block;
                width: 100%;
                resize: vertical;
                font-size: 0.9em;
                min-height: 2.2em;
                max-height: 10em;
            }
        }
    }
    & .options-endpoints{
        background-color: rgba(0,0,0,0.1);
        display: flex;
        flex-flow: column nowrap;
        gap: 0.3em;
    }
    & .options-endpoint{
        position: relative;
        & > .button-icon{
            position: absolute;
            right: -1.5em;
            top: 15%;
            bottom: 15%;
            text-align: center;
        }
    }
    & .options-endpoint-menu-top{
        display: flex;
        flex-flow: row nowrap;
        & mat-form-field{
            flex-shrink: 1;
            &.endpoint-protocol{
                flex-basis: 32%;
            }
            &.endpoint-grpcmode{
                flex-shrink: 0;
                flex-basis: 66%;
            }
        }
    }
    & .options-endpoints-top{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        & .property-name{
            font-size: 1em !important;
        }
        & > div{
            display: flex;
            flex-flow: row nowrap;
            gap: .5em;
        }
    }
    & mat-form-field{
        font-weight: normal;
        font-family: Roboto, "Helvetica Neue", sans-serif;
        font-size: 0.8;
        &, .mat-form-field-wrapper, .mat-form-field-flex, .mat-form-field-infix, mat-select, mat-select div, mat-select .mat-select-trigger, .mat-form-field-underline, .mat-form-field-ripple{
            margin: 0;
            padding: 0;
            border: none;
            line-height: 1;
            outline: none;
            width: 100%;
            height: 100%;
            border-radius: 0;
            background-color: transparent;
            color: var(--text);
            font-size: inherit;
            &::after{
                display: none;
            }
            &::before{
                display: none;
            }
        }
        & .mat-form-field-underline, .mat-form-field-ripple{
            display: none;
        }
        & .mat-select-arrow-wrapper{
            transform: none;
            & > div{
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid;
                margin: 0 4px;
            }
        }
        & mat-select{
            color: var(--text);
            padding: 0.2em;
            cursor: pointer;
            transition: filter 0.1s linear;
            background-color: var(--background-dark);
            border: 0.1rem solid var(--border);
            transition: filter 0.1s linear;
            &:hover{
                    filter: brightness(0.9);
            }
            &.mat-select-disabled{
                pointer-events: none;
                filter: brightness(0.65) !important;
            }
            &:disabled{
                pointer-events: none;
                filter: brightness(0.65) !important;
            }
        }
    }
    & .options-button-icon{
        color: var(--main);
        width: 1em;
        height: 1em;
        margin: 0 1em;
        transition: transform 0.1s linear, color 0.1s linear;
        cursor: pointer;
        display: inline-block;
        &.active{
            color: var(--main);
            &:hover{
                transform: scale(1.1);
                color: var(--main);
            }
        }
        &.inactive{
            color: var(--text);
            &:hover{
                transform: scale(1.1);
                color: var(--text);
            }
        }
        &.disabled{
            color: #757575;
            pointer-events: none;
        }

    }
}
.mat-select-panel{
    background-color: var(--background);
    border: 0.1rem solid var(--border);
    & .mat-option, .mat-option-text{
        color:rgba(255, 255, 255, 0.6)
    }
}
.options-actions{
    & button{
        font-size: 1em;
        border: none;
        outline: none;
        border-radius: 0.5em;
        background-color: var(--main);
        color: #fff;
        padding: 0.25em 0.6em;
        cursor: pointer;
        transition: filter 0.1s linear;
        &:hover{
            filter: brightness(1.25);
        }
        &:active{
            animation: pulsing .35s;
        }
        &:disabled{
            filter:grayscale(70%);
            &:hover{
                background-color: var(--main);
                color: #fff;
                cursor: not-allowed;
            }
        }
    }
}
mat-expansion-panel-header .mat-content{
    flex: unset;
}
mat-expansion-panel .mat-expansion-panel-body{
    padding: 0.3em 0.4em 0.2em;
}
.mat-menu-item{
    color: var(--text) !important;
    font-weight: 500 !important;
    &:hover{
        background-color: var(--background-dark) !important;
    }
}
.mat-menu-item-submenu-trigger::after{
    border-color: transparent transparent transparent var(--text) !important;
}
.mat-tooltip{
    color: var(--text) !important;
    background-color: var(--background) !important;
    border: 0.1rem solid var(--border);
    opacity: 1 !important;
    filter: none !important;
}
snack-bar-container{
    color: var(--text) !important;
    font-weight: 500;
    background-color: var(--background-dark) !important;
    border: 0.1rem solid var(--border) !important;
    & span {
        font-size: 1.15em !important;
    }
}
mat-expansion-panel{
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--text) !important;
    &:not([class*=mat-elevation-z]){
        box-shadow: none !important;
    }
    & mat-expansion-panel-header{
        padding: 0 !important;
        height: auto !important;

    }
    .mat-expansion-panel-body{
        padding: 0 0.15em !important;
        padding-top: 0.4em !important;
    }
}
.mat-select-panel-wrap{
    box-shadow: 4px -7px 20px 7px rgb(0 0 0 / 40%), 0px 4px 5px 0px rgb(0 0 0 / 28%), 0px 1px 10px 0px rgb(0 0 0 / 24%);
    & mat-option.mat-option{
        font-size: 1rem;
        height: 1.5em;
        color: var(--text);
        &:hover{
            background-color: var(--background-dark);
        }
        & span{
            color: inherit;
        }
        &.mat-option-disabled{
            cursor: not-allowed;
            background-color: rgba(120,120,120,0.4);
        }
    }
}
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled), .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
    color: var(--main);
    font-weight: 600;
}
.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: #fff;
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

input, select, option{
    font-size:1rem;
    width: 100%;
    min-width: 0;
}
mat-tooltip-component .mat-tooltip{
    font-size: 0.75rem;
    max-width: 300px;
}
.selection-rect{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    outline: 0.1rem dashed var(--main);
}
.mat-expansion-panel-header-description, .mat-expansion-indicator::after{
    color: var(--text);
}
.mat-slider-horizontal .mat-slider-track-wrapper{
    filter: brightness(0.5) !important;
}
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label{
    background-color: var(--text);
}
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background{
    background: var(--main);
    svg path{
        stroke: var(--background-dark) !important;
    }
}
.mat-checkbox-background{
    border: 0.1rem solid var(--border);
}
.mat-checkbox-disabled .mat-checkbox-label{
    color: var(--text);
    opacity: 0.7;
}
.mat-checkbox-disabled.mat-accent .mat-checkbox-background{
    filter: grayscale(1);
}
.mat-slider-description{
    width: 80%;
    padding-inline: 0.5em;
    margin-top: -0.9em;
    display: flex;
    font-size: 0.75em;
    justify-content: space-between;
    &.low{
        & > *:nth-child(1){
            color: var(--main);
        }
    }
    &.medium{
        & > *:nth-child(2){
            color: var(--main);
        }
    }
    &.high{
        & > *:nth-child(3){
            color: var(--main);
        }
    }
}

.fs-1{
    font-size: 1.65rem !important;
}
.fs-2{
    font-size: 1.4rem !important;
}
.fs-3{
    font-size: 1.2rem !important;
}
.fs-4{
    font-size: 1rem !important;
}
.fs-5{
    font-size: 0.85rem !important;
}
.fs-6{
    font-size: 0.7rem !important;
}

@keyframes receivedata{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes receivedatabg{
    0%{
        background-color: transparent;
    }
    50%{
        background-color: rgba(#fff, 0.35);
    }
    100%{
        background-color: transparent;
    }
}

@keyframes status-side {
    0%{
        opacity: 1;
        bottom: 0;
    }
    80%{
        opacity: 0.7;
        bottom: 100%;
    }
    100%{
        opacity: 0;
        bottom: 110%;
    }
}


@keyframes pulsing {
    0% {
        transform: scale(0.95);
        box-shadow: 0px 0px 0px 0px rgba(148, 62, 219, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0px 0px 0px 20px rgba(232, 69, 69, 0);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(232, 69, 69, 0);
    }
}

@media screen and (min-width: 2560px) {
    html{
        font-size: 1.8rem;
    }
}